<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <script>
    window.Polymer = {
      lazyRegister: true,
      dom: 'shadow'
    }
  </script>

  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="../../bower_components/paper-input/paper-input.html">
  <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

  <style is="custom-style">
    :root {
      /*--paper-input-container-focus-color: red;*/
    }

    paper-input {
      width: 280px;
    }

    paper-input paper-icon-button {
      width: 23px;
      height: 23px;
      padding: 0px 4px;
    }

    #input1 paper-input {
      --paper-input-container-color: red;
    }
  </style>

  <style>
    #input2 {
      --paper-input-container-color: #1e88e5;
    }

    #input2 paper-input /deep/ #input {
      color: #1e88e5;
    }
  </style>
</head>
<body>
<div id="input1">
  <paper-input label="Label" value="value">
    <div prefix>¥</div>
    <paper-icon-button suffix icon="clear"></paper-icon-button>
  </paper-input>
</div>
<div id="input2">
  <paper-input label="Label" value="value">
    <div prefix>¥</div>
    <paper-icon-button suffix icon="clear"></paper-icon-button>
  </paper-input>
</div>
<style is="custom-style">
  #input2 {
    --paper-input-container-color: #1e88e5;
  }
</style>
</body>
</html>